<script lang="ts" setup>

import { ref, reactive } from 'vue'

import type { TabsPaneContext } from 'element-plus'

const activeNameC = ref('one')

const input = ref('')


const formInline = reactive({
  // user: '',
  region: '--全部--',
  region2: '--全部--',
  region3: '--全部--',
  // date: '',
})

const image = [
  { img: 'https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E6%B0%B4%E5%8E%82%E7%AE%A1%E7%90%86/u4525.png', title: '每月入库量' },
  { img: 'https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E6%B0%B4%E5%8E%82%E7%AE%A1%E7%90%86/u4532.png', title: '月底结存' },
  { img: 'https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E6%B0%B4%E5%8E%82%E7%AE%A1%E7%90%86/u4527.png', title: '入库量与出库量对比' }
]



const value1 = ref('')
const value2 = ref('')


const tableData = [
  {
    mouth: '一月',
    kucun: 200,
    ruku: 88,
    chuku: 23,
    yuedi: 68,
  },
  {
    mouth: '二月',
    kucun: 8,
    ruku: 42,
    chuku: 43,
    yuedi: 25,
  },
  {
    mouth: '三月',
    kucun: 58,
    ruku: 33,
    chuku: 54,
    yuedi: 74,
  },
  {
    mouth: '四月',
    kucun: 200,
    ruku: 88,
    chuku: 23,
    yuedi: 68,
  },
  {
    mouth: '五月',
    kucun: 200,
    ruku: 88,
    chuku: 23,
    yuedi: 68,
  },
  {
    mouth: '六月',
    kucun: 200,
    ruku: 88,
    chuku: 23,
    yuedi: 68,
  },
  {
    mouth: '七月',
    kucun: 200,
    ruku: 88,
    chuku: 23,
    yuedi: 68,
  },
  {
    mouth: '八月',
    kucun: 200,
    ruku: 88,
    chuku: 23,
    yuedi: 68,
  },


]
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  console.log('qqqqq', rowIndex);

  // if (rowIndex == 1) {
  //   return 'warning-row'
  // } else if (rowIndex == 3) {
  //   return 'success-row'
  // }
  // return 'success-row'
  return 'qqq'
}
</script>

<template>

  <div class="first">

    <el-input v-model="input" disabled placeholder="查询条件"></el-input>
    <div class="detail">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="所属仓库 :
              ">
          <el-select v-model="formInline.region" clearable>
            <el-option label="--全部--" value="--全部--" />
            <el-option label="仓库一" value="仓库一" />
            <el-option label="仓库二" value="仓库二" />
            <el-option label="仓库三" value="仓库三" />
          </el-select>
        </el-form-item>
        <el-form-item label="物料名称 :
              ">
          <el-select v-model="formInline.region2" clearable>
            <el-option label="--全部--" value="--全部--" />
            <el-option label="物料一" value="物料一" />
            <el-option label="物料二" value="物料二" />
            <el-option label="物料三" value="物料三" />
          </el-select>
        </el-form-item>
        <el-form-item label="物料类别 :
              ">
          <el-select v-model="formInline.region3" clearable>
            <el-option label="--全部--" value="--全部--" />
            <el-option label="类别一" value="类别一" />
            <el-option label="类别二" value="类别二" />
            <el-option label="类别三" value="类别三" />
          </el-select>
        </el-form-item>







      </el-form>
    </div>

    <div class="image">
      <div class="tl item">
        <el-table :row-class-name="tableRowClassName" :data="tableData" :stripe="true"
          style="width: 100%;font-size: 10px;height: 100%;">
          <el-table-column prop="mouth" align="center" label="月份" />
          <el-table-column class="text-ellipsis-2" prop="kucun" align="center" :show-overflow-tooltip="true"
            label="上次库存结存" width="150" />
          <el-table-column prop="ruku" align="center" label="本月入库量" />
          <el-table-column prop="chuku" align="center" label="本月出库量" />
          <el-table-column prop="yuedi" align="center" label="月底结存" />
        </el-table>
      </div>
      <div class="tr item" v-for="item in image">
        <span class="title">{{ item.title }}</span>
        <el-image class="li"
          src="https://img.axureshop.com/c9/57/1d/c9571de2aa7c47d2865ef6311a990b6a/images/%E6%B0%B4%E5%8E%82%E7%AE%A1%E7%90%86/u4526.png">
        </el-image>
        <el-image :src="item.img" style="background-color: #fff;height: 100%;width: 100%;" :fit="fit">
        </el-image>
        <div class="ku" v-show="item.title === '入库量与出库量对比'">
          <span>入库量</span>
          <span>出库量</span>
        </div>

      </div>

      <!-- <div class="bl item">3</div> -->
      <!-- <div class="br item">4</div> -->
    </div>



  </div>
</template>

<style lang="scss" scoped>
.text-ellipsis-2 {
  overflow: hidden;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.first {
  .el-input {
    margin-bottom: 5px;
  }

  .detail {
    border: 2px solid #ebe8e8;
    border-radius: 4px 4px 0 0;
    padding: 10px 10px;
    margin-bottom: 10px;

    .el-form {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-evenly;
      align-content: center;


      .el-form-item {
        align-self: center;
        margin: 0;
        margin-bottom: 10px;
        margin-right: 20px;
      }

    }

  }

  .image {
    height: 530px;
    border: solid 2px #ebe8e8;
    border-radius: 4px 4px 0 0;
    display: flex;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
    background-color: #fff;

    .item {
      width: 48%;
      height: 248px;
      // border: 1px solid #ebe8e8;
      position: relative;



    }

    .tl {
      width: 48%;
      border: 2px solid #ebe8e8;

      .el-table {
        thead {
          height: 20px;
          overflow: hidden;
        }
      }



      ::v-deep {
        .el-table {


          --el-table-header-text-color: #fff;
          --el-table-header-bg-color: #007ab2;
          --el-table-row-hover-bg-color: transparent;


          .el-table__row {
            background-color: #f66;
          }



          .el-table__row--striped {
            background-color: #daeef3;
          }
        }


      }
    }



    .tr {
      .title {
        position: absolute;
        top: 10px;
        left: 50%;
        z-index: 99;
        transform: translateX(-50%);

      }

      .li {
        position: absolute;
        left: 2px;
        bottom: 45px;
        z-index: 99;
      }

      .ku {
        position: relative;
        bottom: 25px;
        z-index: 888;
        left: 44%;
        font-size: 9px;

        span {
          margin-right: 20px;
        }
      }
    }
  }



  .demo-form-inline .el-input {
    --el-input-width: 220px;
  }

  .demo-form-inline .el-select {
    --el-select-width: 220px;
  }

}
</style>